<template>
  <div>
    <el-col class="left-top-area">
      <div @click="type=1">
        <span class="code_sign iconfont icon-daima"></span>
        <p class="code_word" :class="{'click': type===1}">代码编写</p>
        <img src="~assets/img/experiment/experiment_line.png" alt="line" v-show="type===1" class="code_line">
      </div>
      <div @click="type=2">
        <span class="parameter_sign iconfont icon-shujukongzhitai"></span>
        <p class="parameter_word" :class="{'click': type === 2}">飞机坐标</p>
        <img src="~assets/img/experiment/experiment_line.png" alt="line" v-show="type===2" class="parameter_line">
      </div>
      <div>
        <!--        代码区域-->
        <div class="plane_code" v-show="type===1">
          <el-input
            spellcheck="false"
            type="textarea"
            class="codeTextarea"
            :rows="31"
            v-model="code">
          </el-input>

          <button type="button" class="run_code_button" @click="run">
            <span class="iconfont icon-bofang" style="color: #FFFFFF"></span>
            <span class="button_word" style="color: #FFFFFF">运行</span>
          </button>
        </div>
        <!--        展示区域-->
        <div v-show="type===2" class="parameter">
          <div class="data_table">
            <table>
              <tr class="data_table_item">
                <td class="data_table_item">编号</td>
                <td class="data_table_item">x</td>
                <td class="data_table_item">y</td>
                <td class="data_table_item">z</td>
                <td class="data_table_item">碰撞概率</td>
                <td class="data_table_item">飞行距离</td>
              </tr>
              <tr class="data_table_item" v-for="(item, index) in $store.state.ex4.tableData">
                <td class="data_table_item">{{ item.planeNo }}</td>
                <td class="data_table_item">{{ item.posx }}</td>
                <td class="data_table_item">{{ item.posy }}</td>
                <td class="data_table_item">{{ item.posz }}</td>
                <td class="data_table_item">{{ item.rate }}</td>
                <td class="data_table_item">{{ item.distance }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </el-col>
    <!--    按钮区域-->
    <div class="button_area">
      <button type="button" class="hint_button" @click="hint">
        <span class="iconfont icon-icon"></span>
        <span class="button_word">查看提示</span>
      </button>
      <button type="button" class="finish_button" @click="finishExperiment">
        <span class="iconfont icon-wancheng" style="color: #FFFFFF"></span>
        <span class="button_word" style="color: #FFFFFF">完成实验</span>
      </button>
      <button type="button" class="reset_button" @click="reset">
        <span class="iconfont icon-reset"></span>
        <span class="button_word">重新实验</span>
      </button>
      <button type="button" class="back_button" @click="save">
        <span class="iconfont icon-fanhui"></span>
        <span class="button_word">保存并返回</span>
      </button>
    </div>

    <!--    提示区域-->
    <el-dialog
      :visible.sync="dialogHintVisible"
      width="800"
      height="480"
      :modal-append-to-body='false'>

      <img src="~assets/img/experiment/notice/ex4_notice.png" alt="实验二提示信息" style="width: 100%; height: 100%">

      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="download()" v-if="finish">正确代码</el-button>
      <el-button @click="dialogHintVisible = false">关闭</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {getCode, getOneStatus, saveCode, clear, changeOneStatus} from "network/experiment/experiment";
import {checkZ} from "utils/experiment/ex4/ex4";
import {EventBus} from "assets/js/experiment/ex4/eventBus";

export default {
  name: "ex4_left",
  inject: ['reload'],
  data() {
    return {
      type: 1,
      finish: false,
      dialogHintVisible: false,
    }
  },
  created() {
    // 获取实验二代码
    getCode(4)
      .then(res => {
        this.$store.commit('changeEx4Code', res.data)
      })
    // 获取实验二状态
    getOneStatus(4)
      .then(res => {
        this.finish = (res.data.status === 2)
      })
  },
  computed: {
    code: {
      get() {
        return this.$store.state.ex4.code
      },
      set(value) {
        this.$store.commit('changeEx4Code', value)
      }
    }
  },
  methods: {
    // 运行代码
    run() {
      this.type = 2
      EventBus.$emit('run')
    },
    // 查看提示
    hint() {
      this.dialogHintVisible = true
    },
    // 重新实验
    reset() {
      clear(4)
        .then(res => {
          this.$message({
            message: '重置成功',
            type: 'success',
            duration: 1000,
            offset: 50
          });
          setTimeout(this.reload, 1000);
        })
    },
    // 完成实验
    finishExperiment() {
      if (this.$store.state.ex4.codeTrue === false) {
        let message = "请先正确编译运行代码！"
        this.$alert(message, '提示', {
          confirmButtonText: '确定'
        })
      } else if (!checkZ(this.$store.state.ex4.tableData)) {
        let message = "飞行结果不像Z哦，请继续努力！"
        this.$alert(message, '提示', {
          confirmButtonText: '确定'
        })
      } else {
        saveCode(4, this.$store.state.ex4.code)
          .then(res => {
            changeOneStatus(4, 2)
              .then(res => {
                let message = "恭喜你完成步骤四！"
                this.$alert(message, '提示', {
                  confirmButtonText: '退出',
                  callback: action => {
                    this.closeExperiment()
                  }
                })
              })
          })
      }
    },
    // 保存并退出
    save() {
      saveCode(4, this.$store.state.ex4.code)
        .then(res => {
          this.$message.success('保存成功')
          setTimeout(this.closeExperiment, 1000);
        })
    },
    // 下载正确代码
    download() {
      window.open(
        'http://virtual.hsueh.club/static/experiment/4.txt'
      );
    },
    closeExperiment() {
      this.$emit('changeExperimentNo', 0)
    }
  }
}
</script>

<style scoped>
@import "../../../assets/css/experiment/ex4/ex4_left.css";
</style>
